<template>
	<div class="navMenu">
		<div v-for="(item, index) in message" class="item" @click.stop.prevent="handleLink($event, item, index)">
			<div class="item-cont flexleft" :class="{ 'is-disabled': !(item.id || item.child) }">
				<!-- 判断是否当前循环是否存在child，存在展示 -->
				<view :class="item.isOpen?'xia_jt':'you_jt'" v-if="item.child && item.child.length != 0">
					<u-icon name="play-right-fill" color="#0BBDCB" size="14" ></u-icon>
				</view>
				<view :class="currentid==item.id?'colortext':''">
					{{ item.name}}
				</view>
				<text class="maincolor_text">{{item.num?item.num:''}}</text>
				
			</div>
			<!-- 判断是否存在子级菜单child，存在展示否则不展示 -->
			<!-- 判断isopen是否为true，如果为true的话展示下级内容，如果为false不展示下级内容 -->
			<div :class="item.isOpen?'list-child':'active'" v-if="item.child && item.child.length != 0">
				<Menu :list="item.child" @handleLink="handleLink"></Menu>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Menu",
		props: {
			 list: {
			            type: Array,
			            default: [],
			        },
		},
		data() {
			return {
				message:[],
				currentid:"",
			};
		},
		watch:{
			list(newval,oldval){
				this.message = this.list 
			},
		},
		mounted() {
			this.message = this.list
		},
		methods: {
			handleLink($event, item, index) {
				this.currentid = item.id
				this.$emit("handleLink", $event, item, index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.colortext{
		color: #0BBDCB;
	}
	.maincolor_text{
		margin-left: 10rpx;
		color: #0BBDCB;
	}
	.navMenu {
		height: auto;
		// background: #ffa126;
		.item {
			width: 200rpx;
			color: black;

			.child,
			.item-cont {
				height: 100rpx;
				position: relative;
				// &:hover {
				// 	color: #0BBDCB;
				// 	// background: #ffa126;
				// }
				&.is-disabled {
					opacity: 0.25;
					cursor: not-allowed;
					color: #0BBDCB;
				}

				.icon {
					content: "";
					border: 8rpx solid;
					border-color: #f00 transparent transparent transparent;
					position: absolute;
					top: calc(50% - 4rpx);
					right: 0;
				}
			}

			.list-child {
				padding-left: 30rpx;
			}
		}
	}
	.active{
		display: none;
	}
	.xia_jt{
		transform:rotate(90deg);
		transition: all .2s;
	}
	.you_jt{
		transition: all .2s;
	}
</style>
